<template>
  <div>
      <div class="top">
          <p>留言管理</p>
      </div>
      <el-row class="top_button">
        <el-button type="primary" @click="add">新增</el-button>
        <el-button type="primary">提醒设置</el-button>
      </el-row>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="Leave_ID"
        label="ID"
        width="60px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Leave_name"
        label="名称"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Leave_tablename"
        label="表名"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Leave_msg"
        label="备注"
        width="480px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="Leave_read"
        label="未读/总数"
        width="120px"
        align="center">
        <template>
          <el-button type="primary" class="btn" @click="read">{{noreade}}/3</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="Leave_code" 
        label="代码"
        width="80px"
        align="center">
        <template>
          <el-button type="primary" class="btn" @click="daima">代码</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="Leave_codemanage"
        label="字码管理"
        width="100px"
        align="center">
        <template>
          <el-button type="primary" class="btn">字段[6]</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="Leave_operation"
        label="操作"
        width="230px"
        align="center">
        <template>
          <el-button type="primary" class="btn">复制</el-button>
          <el-button type="primary" class="btn">编辑</el-button>
          <el-button type="primary" class="btn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data(){
        return{
            tableData:[],
            num:0,
           
            
        }
    },
    created(){
        this.$http({
            method:"get",
            path:"/leavemsg.json",
        }).then((rel)=>{
          // console.log(rel[0].ReadMsg.length);
          // let total = rel[0].ReadMsg.length
            this.tableData = rel
            // console.log(rel);
        }).catch((err)=>{})
    },
    methods:{
      read(){
        this.$router.push({
          path:'/leavemsg/read'
        })
      },
      add(){
        this.$router.push({
          path:'/leavemsg/leavemsg_add'
        })
      },
      daima(){

      }
    },
    computed:{
      noreade(){
        this.tableData.forEach(item => {
          item.ReadMsg.forEach(msg=>{
            msg.Read_status== "未读" ? this.num++ : '';
          })
        });
        return this.num 
      }
      
      
    }
}
</script>

<style scoped>
.top{
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
}
.top p{
    padding-left: 15px;
    line-height: 15px;
    border-left: 2px solid #88b7e0;
    color: #2d2b2c;
    font-size: 14px;
}
.top_button{
    height: 74px;
    padding: 17px 0;
}
.top_button .el-button{
    background: #28b5d6;
    border-radius: 0;
    font-size: 12px;
    padding: 0 17px;
    line-height: 32px;
}
.btn{
  background: #28b5d6;
    border-radius: 0;
    font-size: 12px;
    padding: 0 17px;
    line-height: 32px;
    margin:0 2px;
    float: left;
}
.el-table{
    padding-top: 17px 0;
    float: none;
    font-size: 12px;
    background: #fff;

}

</style>